<template>
  <div class="history_serial list_panel" v-loading="isLoading">
    <p class="serial_title">
      已生成序列号 （{{serialNumberList.length}}）
    </p>
    <div class="empty_panel" v-if="!serialNumberList.length"><span>暂无生成结果</span></div>
    <div class="serial_list list_container" v-if="serialNumberList.length">
      <p v-for="(item, index) in serialNumberList" :key="index">
        {{item.serialNumber}}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HistorySerialNumber',
  props: {
    workStageMsg: {}
  },
  data() {
    return {
      serialNumberList: [], // 序列号
      isLoading: false, // 加载中
    }
  },
  methods: {
    getHistorySerialNumber() {
      let postData = this.workStageMsg
      this.isLoading = true
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/turnovermaterialserialnumber/turnoverMaterialSerialNumber/getBatchSerialNumber',
        data: postData,
        noCommit: true
      }).then((res) => {
        this.serialNumberList = res.data || []
      }).finally(() => {
        this.isLoading = false
      })
    }
  }
}
</script>

<style lang="less">
  .history_serial{
    width: 100%;
    .serial_title{
      overflow: hidden;
      height: 44px;
      line-height: 44px;
      padding-left: 15px;
      border-bottom: 1px solid #dbe1e8;
    }
    .serial_list{
      height: calc(100% - 50px);
      padding-left: 15px;
      overflow-y: auto;
      display: flex;
      flex-flow: row wrap;
      align-content: baseline;
      box-sizing: border-box;
      p{
        margin-right: 10px;
        margin-top: 10px;
        background-color: #dcdfe6;
        color: #333333;
        border-radius: 2px;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
</style>
